<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.batch_no" placeholder="批次号查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.bank_name" placeholder="银行名称查询" clearable></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <c-select v-model="params['approval_status.eq']"
                  @change="getData()"
                  clearable
                  :options="enumSerachStatus"
                  placeholder="项目状态"></c-select>
      </el-form-item> -->
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:ab_name="scope">
        <div>{{ `A角：${scope.row.res_a_name || '-'}` }}</div>
        <div>{{ `B角：${scope.row.res_b_name || '-'}` }}</div>
      </template>
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <recommend-file-dialog
      :visible.sync="attachVisible"
      :batch-data="attachBatchData"
      view-mode
    ></recommend-file-dialog>

    <approve-dialog
      :visible.sync="editVisible"
      :query-id="editQueryId"
      @success="handleSuccess"
    ></approve-dialog>

    <el-dialog
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
      title="查看"
      class="dialog-sm"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="项目审批表" name="first">
          <approve-view :query-id="viewQueryId" view-mode></approve-view>
        </el-tab-pane>
        <el-tab-pane label="项目明细">
          <submit-list :query-id="viewQueryId" view-mode></submit-list>
        </el-tab-pane>
        <el-tab-pane label="担保确认函" v-if="contractId">
          <pdf-view down-name="担保确认函" :contract-id="contractId" view-mode></pdf-view>
        </el-tab-pane>
        <el-tab-pane label="推荐函">
          <attach-view :attach-data="attachData"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  approveBaseColumns,
  // approveDataAdapter,
  // getInvingPerson,
  // getFollow
} from '@/credit/views/county/unionFast/invest/components/index'

import SubmitList from '@/bank/views/fast/recommend/SubmitList'
import RecommendFileDialog from '@/bank/views/fast/recommend/RecommendFileDialog'
import ApproveDialog from '@/credit/views/county/unionFast/invest/components/MainDialog'
import ApproveView from '@/credit/views/county/unionFast/invest/components/Main'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
// import { enumInvestStatus, enumInvestStyle } from '@/credit/views/city/bus/simple/index'
import AttachView from '@/credit/views/city/bus/simple/AttachView'
export default {
  components: {
    SubmitList,
    RecommendFileDialog,
    ApproveDialog,
    ApproveView,
    AttachView,
    PdfView,
  },
  props: {},
  data() {
    return {
      enumSerachStatus: {
        0: '未调查',
        1: '已调查',
      },
      params: {
        index: 1,
        size: 15,
        batch_no: '',
        bank_name: '',
        'confuse_status.neq': 3,
        'task_status.eq': 0,
      },
      order: {
        create_time: 'desc',
      },

      loading: false,
      exportLoading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        ...approveBaseColumns,
        // { attrs: { label: '待处理人员', prop: 'itemStatusLabel', width: 80, align: 'center' } },
        // { attrs: { label: '项目状态', prop: 'statusLabel', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '项目审批',
              icon: 'fa fa-gavel',
              event: this.handleApprove,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],

      // 查看
      viewVisible: false,
      viewQueryId: '',
      contractId: '',
      active: 'first',

      // 附件
      attachVisible: false,
      attachBatchData: {},

      // 审批
      editVisible: false,
      editQueryId: '',
      searchStatus: '',
      attachData: '',
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {},
  created() {
    this.params['task_person.eq'] = this.userId
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, 'task_list_view_db_quick', this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleView(row = {}) {
      this.viewQueryId = row.customer_related_quick_batch_id
      this.contractId = row.doc_id
      this.attachData = row.attachment || ''
      this.active = 'first'
      this.viewVisible = true
    },

    handleApprove(row) {
      this.editQueryId = row.customer_related_quick_batch_id
      this.editVisible = true
    },
    handleSuccess() {
      this.getData()
      this.$store.dispatch('getTaskResCountFast')
    },
  },
}
</script>

<style lang="scss" scoped></style>
